<template>
  <div class="add_yuan">
    <div class="yuan_box">
      <div class="form_box">
        <div class="edit_item" style="align-items: flex-start">
          <!-- <div class="name">数据描述：</div> -->
          <el-form
            ref="form"
            class="item_box"
            :rules="rules"
            :model="currEdit"
            label-position="right"
            label-width="130px"
          >
            <el-row style="width: 100%">
              <el-col :span="12">
                <el-form-item label="属性：" prop="fieldAttribute">
                  <el-input
                    class="bin_input"
                    maxlength="20"
                    v-model="currEdit.fieldAttribute"
                    placeholder="请输入"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字段标识：" prop="fieldName">
                  <el-tooltip
                    content="字段标识是程序中使用"
                    placement="top-start"
                  >
                    <el-input
                      class="bin_input"
                      maxlength="20"
                      v-model="currEdit.fieldName"
                      placeholder="字段标识为英文及数字"
                    ></el-input>
                  </el-tooltip>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="字段名称：" prop="fieldDescription">
                  <el-input
                    class="bin_input"
                    maxlength="20"
                    v-model="currEdit.fieldDescription"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数据类型：" prop="fieldType">
                  <el-select
                    filterable
                    class="bin_select"
                    v-model="currEdit.fieldType"
                    placeholder="请选择数据类型"
                  >
                    <el-option
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                      {{ item.label }}
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="长度：" prop="fieldLength">
                  <el-input
                    class="bin_input"
                    maxlength="50"
                    v-model="currEdit.fieldLength"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="域值：">
                  <el-row style="display: flex; align-items: center">
                    <el-col :span="10">
                      <el-form-item prop="fieldRangeMin">
                        <el-input
                          class="bin_input"
                          maxlength="10"
                          v-model="currEdit.fieldRangeMin"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                    <el-col class="line" :span="4" style="text-align: center"
                      >一</el-col
                    >
                    <el-col :span="10">
                      <el-form-item prop="fieldRangeMax">
                        <el-input
                          class="bin_input"
                          maxlength="10"
                          v-model="currEdit.fieldRangeMax"
                        >
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否允许为空：" prop="isNull">
                  <el-select
                    filterable
                    class="bin_input"
                    v-model="currEdit.isNull"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optionsnull"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col :span="12">
                <el-form-item label="是否唯一：" prop="isOnly">
                  <el-select
                    class="bin_input"
                    v-model="currEdit.isOnly"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optionsonly"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col> -->
              <el-col :span="12">
                <el-form-item label="要素说明：" prop="elementDefinition">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.elementDefinition"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="标签：" prop="target">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.target"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="量纲：" prop="unit">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.unit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="业务操作类型："
                  prop="businessOperationType"
                >
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.businessOperationType"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属类别：" prop="fieldCategory">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.fieldCategory"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="关联字典：" prop="associationDict">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.associationDict"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="管理单位：" prop="managementUnit">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.managementUnit"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="格式说明：" prop="historicalExplanation">
                  <el-input
                    class="bin_input"
                    maxlength="10"
                    v-model="currEdit.historicalExplanation"
                    placeholder="请输入"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
    </div>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="charuyuan">
        确认
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    metadataDictyTableId: {
      type: String,
    },
  },
  data() {
    return {
      currEdit: {
        isOnly: 0,
      },
      radio: 1,
      rules: {
        fieldAttribute: [
          { required: true, message: "请输入属性名", trigger: "blur" },
        ],
        fieldName: [
          { required: true, message: "请输入字段标识", trigger: "blur" },
        ],
        fieldDescription: [
          { required: true, message: "请输入字段名称", trigger: "blur" },
        ],
        fieldType: [
          { required: true, message: "请选择数据类型", trigger: "change" },
        ],
        fieldLength: [
          { required: true, message: "请输入长度", trigger: "blur" },
        ],
        // fieldRange: [
        //   { required: false, message: "请输入域值", trigger: "blur" },
        // ],
        isNull: [{ required: true, message: "请选择", trigger: "change" }],
        // isOnly: [{ required: true, message: "请选择", trigger: "change" }],
        elementDefinition: [
          { required: false, message: "请输入要素说明", trigger: "blur" },
        ],
        managementUnit: [
          { required: false, message: "请输入管理单位", trigger: "blur" },
        ],
        historicalExplanation: [
          { required: false, message: "请输入格式说明", trigger: "blur" },
        ],
      },
      typeOptions: [
        {
          label: "字符串",
          value: "STRING",
        },
        {
          label: "整数",
          value: "INT",
        },
        {
          label: "长整数",
          value: "LONG",
        },
        {
          label: "浮点数",
          value: "FLOAT",
        },
        {
          label: "双精度浮点数",
          value: "DOUBLE",
        },
        {
          label: "布尔值",
          value: "BOOLEAN",
        },
        {
          label: "日期",
          value: "DATE",
        },
        {
          label: "时间戳",
          value: "TIMESTAMP",
        },
        {
          label: "十进制",
          value: "DECIMAL",
        },
        {
          label: "二进制",
          value: "BINARY",
        },
        {
          label: "时间",
          value: "TIME",
        },
        {
          label: "大对象",
          value: "BLOB",
        },
        {
          label: "日期时间",
          value: "DATETIME",
        },
      ],
      optionsnull: [
        {
          value: 0,
          label: "可以为空",
        },
        {
          value: 1,
          label: "不可为空",
        },
      ],
      optionsonly: [
        {
          value: 0,
          label: "不唯一",
        },
        {
          value: 1,
          label: "唯一",
        },
      ],
    };
  },
  created() {
    this.currEdit.metadataDictyTableId = this.metadataDictyTableId;
    this.getType();
  },
  methods: {
    getType() {
      this.$api.getMetadataType().then((res) => {
        if (res.code == 200) {
          this.typeOptions = res.result;
        }
      });
    },
    charuyuan() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.currEdit.fieldRangeMin && this.currEdit.fieldRangeMax) {
            this.currEdit.fieldRange =
              this.currEdit.fieldRangeMin.toString() +
              "," +
              this.currEdit.fieldRangeMax.toString();
          }

          this.$emit("confirm", this.currEdit);
          setTimeout(() => {
            this.currEdit = {};
            this.currEdit.isOnly = 0;
            this.currEdit.metadataDictyTableId = this.metadataDictyTableId;
          }, 1000);
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    cancelBtn() {
      this.$emit("cancel");
    },
    goLinkFn() {
      this.$emit("click");
    },
  },
};
</script>

<style scoped lang="scss">
.add_yuan {
  .el-dialog__body {
    padding: 0;
  }

  .yuan_box {
    .edit_item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20px;

      .name {
        width: 120px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 500;
        font-size: 18px;
        line-height: 40px;
        color: #fff;
        text-align: right;
      }

      .ipt {
        width: 300px;
      }

      .item_box {
        display: flex;
        flex-wrap: wrap;
        width: calc(100% - 100px);

        .edit_item {
          width: 50%;

          .name {
            width: 120px;
          }
        }

        .ipt {
          width: calc(100% - 100px);
        }
      }
    }

    .form_box {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      min-height: 200px;
      background: #072f46;
      margin-bottom: 20px;
      border: 1px solid #02fff4;

      ::v-deep .el-form--label-right .el-form-item__label {
        color: #fff;
      }
    }
  }

  .edit_btns {
    margin-top: 50px;
    display: flex;
    align-self: center;
    justify-content: center;
  }
}
</style>
